import type { Meta, StoryObj } from '@storybook/vue3-vite';

import { fn } from 'storybook/test';

import { NDynamicTags } from 'naive-ui';

const meta = {
  title: 'Navie UI/NDynamicTags',
  component: NDynamicTags,
  tags: ['autodocs'],
  argTypes: {
    value: {
      control: 'object',
      description: '当前值'
    },
    max: {
      control: 'number',
      description: '最大标签数'
    }
  },
  args: {
    value: undefined,
    max: undefined
  },
  render: (args) => ({
    components: { NDynamicTags },
    setup() {
      const value = ref(args.value || '');
      return { args, value };
    },
    template: `
      <div style="padding: 1rem;">
        <NDynamicTags
          v-bind="args"
          :value="value"
          @update:value="value = $event"
        />
        <p style="margin-top: 1rem;">当前值: {{ JSON.stringify(value) }}</p>
      </div>
      `
  }),
} satisfies Meta<typeof NDynamicTags>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  name: '基础用法',
  args: {
    ...meta.args,
    value: ['教师', '程序员']
  },
};


export const ObjectFormat: Story = {
  name: '使用对象格式的值',
  args: {
    ...meta.args,
    value: [{ label: '教师', value: 'teacher' }, { label: '程序员', value: 'programmer' }]
  },
  render: (args) => ({
    components: { NDynamicTags },
    setup() {
      const value = ref(args.value || '');
      return { args, value };
    },
    template: `
      <div style="padding: 1rem;">
        <NDynamicTags
          v-bind="args"
          :value="value"
          @update:value="value = $event"
          @create="(label) => ({ label, value: label.toLowerCase() })"
        />
        <p style="margin-top: 1rem;">当前值: {{ JSON.stringify(value) }}</p>
      </div>
      `
  }),
};
